<template>
  <div class="qyui-cell row">
    <el-form v-if="manager.bookCord" label-width="100px">
      <el-form-item label="布局">
        <el-switch
          v-model="manager.bookCord.showType"
          active-text="竖行"
          inactive-text="横行"
          active-value="CordL"
          inactive-value="CordT"
          @change="handeleShowTypeChange"
        >
        </el-switch>
      </el-form-item>
      <el-form-item v-show="manager.bookCord.showType==='CordL'" label="整体高度">
        <el-input-number
          :model-value="gridViewHeight" :step="3" step-strictly :controls="false" style="width:160px"
          @change="handleInputHeight"
        ></el-input-number>
      </el-form-item>
      <el-form-item v-show="manager.bookCord.showType==='CordT'" label="整体宽度">
        <el-input-number
          :model-value="gridViewWidth" :step="3" step-strictly :controls="false" style="width:160px"
          @change="handleInputWidth"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="上边距">
        <el-input-number
          v-model="manager.bookCord.Top" :step="3" step-strictly :controls="false" style="width:160px"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="左边距">
        <el-input-number
          v-model="manager.bookCord.Left" :step="3" step-strictly :controls="false" style="width:160px"
        ></el-input-number>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  inject: ['manager'],
  computed: {
    gridViewHeight() {
      let val = 0;
      this.manager.bookCord.Rows.forEach(a => {
        val += a.Height;
      });
      return val;
    },
    gridViewWidth() {
      let val = 0;
      this.manager.bookCord.Columns.forEach(a => {
        val += a.Width;
      });
      return val;
    },
  },
  methods: {
    handleInputHeight(val) {
      if (val) {
        const num1 = this.$lodash.floor(this.$lodash.divide(this.$lodash.add(val, -69), 2), 0);
        const num2 = this.$lodash.sum([val, -69, -num1]);
        this.manager.bookCord.Rows[0].Height = num1;
        this.manager.bookCord.Rows[2].Height = num2;
      }
    },
    handleInputWidth(val) {
      if (val) {
        const num1 = this.$lodash.floor(this.$lodash.divide(this.$lodash.add(val, -69), 2), 0);
        const num2 = this.$lodash.sum([val, -69, -num1]);
        this.manager.bookCord.Columns[0].Width = num1;
        this.manager.bookCord.Columns[2].Width = num2;
      }
    },
    handeleShowTypeChange(val) {
      if (val === 'CordL') {
        const cells = [];
        for (let y = 0; y < 3; y++) {
          for (let x = 0; x < 2; x++) {
            const obj = {
              RowIndex: y,
              ColumnIndex: x,
              StartCellRowIndex: y,
              StartCellColumnIndex: x,
              MaxRowIndex: y,
              MaxColumnIndex: x,
            };
            if ((y === 0 || y === 2) && x === 0) {
              obj.BorderRightLineStyle = 'dotted';
              obj.BorderRightWidth = '2';
            } else {
              obj.BorderBottomLineStyle = 'None';
            }
            if (y === 1 && x === 0) {
              obj.MaxColumnIndex = 1;
              obj.Text = "'装订线'";
              obj['writing-mode'] = 'tb-rl';
            }
            if (y === 1 && x === 1) {
              obj.StartCellColumnIndex = 0;
            }
            cells.push(this.manager.addNewCell(obj));
          }
        }
        const gridView = {
          ID: -1,
          Name: 'cord',
          showType: 'CordL',
          Left: 21,
          Top: 21,
          ZIndex: 0,
          Columns: [
            { ColumnIndex: 0, Width: 12 },
            { ColumnIndex: 1, Width: 12 },
          ],
          Rows: [
            { RowIndex: 0, Type: 'Title', Height: 201 },
            { RowIndex: 1, Type: 'Title', Height: 69 },
            { RowIndex: 2, Type: 'Title', Height: 201 },
          ],
          Cells: cells,
        };
        this.manager.bookCord = gridView;
      } else {
        const cells = [];
        for (let y = 0; y < 2; y++) {
          for (let x = 0; x < 3; x++) {
            const obj = {
              RowIndex: y,
              ColumnIndex: x,
              StartCellRowIndex: y,
              StartCellColumnIndex: x,
              MaxRowIndex: y,
              MaxColumnIndex: x,
            };
            if ((x === 0 || x === 2) && y === 0) {
              obj.BorderBottomLineStyle = 'dotted';
              obj.BorderBottomWidth = '2';
            } else {
              obj.BorderRightLineStyle = 'None';
            }
            if (x === 1 && y === 0) {
              obj.MaxRowIndex = 1;
              obj.Text = "'装订线'";
            }
            if (x === 1 && y === 1) {
              obj.StartCellRowIndex = 0;
            }
            cells.push(this.manager.addNewCell(obj));
          }
        }
        const gridView = {
          ID: -1,
          Name: 'cord',
          showType: 'CordT',
          Left: 21,
          Top: 21,
          ZIndex: 0,
          Columns: [
            { ColumnIndex: 0, Width: 201 },
            { ColumnIndex: 1, Width: 69 },
            { ColumnIndex: 2, Width: 201 },
          ],
          Rows: [
            { RowIndex: 0, Type: 'Title', Height: 12 },
            { RowIndex: 1, Type: 'Title', Height: 12 },
          ],
          Cells: cells,
        };
        this.manager.bookCord = gridView;
      }
      console.log(this.manager.bookCord);
    },
  },

};
</script>

<style>

</style>
